<template>
  <view class="order-detail">
    <view class="order-detail-header"> 
      {{orderStatus | formatStatus}}
    </view>
    <!-- 商品信息 -->
    <view class="good-info-section">
      <view class="order-info-header">商品信息</view>
      <view
        class="goods-box-single"
      >
        <!-- 商品图片 -->
        <image
          class="goods-img"
          :src="orderDetail.goodImg"
          mode="aspectFill"
        />
        <!-- 订单商品详情 -->
        <view class="right">
          <text class="title clamp">
            {{ orderDetail.goodName }}
          </text>
          <view v-if="!extraOrder" class="good-detail-info">
            <text class="attr-box">
              配送模式：{{ orderDetail.deliveryModel | formatDeliveryModel }}
            </text>
            <text class="attr-box">
              配送时间：{{ orderDetail.deliveryStart }} 至 {{ orderDetail.deliveryEnd }}
            </text>
            <text class="attr-box">
              每日数量：{{ orderDetail.avgNumPreDay }}件
            </text>
            <text class="attr-box">
              总数量：  {{ orderDetail.totalNum }}件
            </text>
          </view>
          <view v-else class="good-detail-info">
            <text class="attr-box">
              替换前：{{ orderDetail.changeBefore }}
            </text>
            <text class="attr-box">
              替换后：{{ orderDetail.changeAfter }}
            </text>
            <text class="attr-box">
              总数量：  {{ orderDetail.totalNum }}件
            </text>
          </view>
        </view>
        <view class="price-box">
          ￥{{ orderDetail.goodPrice }}
        </view>
      </view>
      <!-- 商品总计 -->
      <view class="good-amount">
        <view class="good-amount-item">
          <text>商品总计：</text>
          <text>￥{{orderDetail.totalAmount}}</text>
        </view>
        <view class="good-amount-item">
          <text>运费：</text>
          <text>￥{{orderDetail.postAmount.toFixed(2)}}</text>
        </view>
        <view class="good-amount-item">
          <text>优惠：</text>
          <text>-￥{{orderDetail.couponAmount.toFixed(2)}}</text>
        </view>
        <view class="good-amount-item">
          <text>实付：</text>
          <text>￥{{orderDetail.payAmount}}</text>
        </view>
      </view>
    </view>
    <!-- 配送信息 -->
    <view class="delivery-info-section">
      <view class="order-info-header">配送信息</view>
      <view class="delivery-address-info">
        <text class="yticon icon-icon-test"></text>
        <view class="address-container">
          <text>{{orderDetail.deliveryAddress}}</text>
          <text>{{orderDetail.receiverName}} {{orderDetail.receiverMobile | formatMobile}}</text>
        </view>
      </view>
      <view
        v-if="!(orderStatus === 1 || extraOrder === 1)"
        class="delivery-info-times"
        @click="navToDelivery">
        <text>共配送{{orderDetail.deliveryTimes}}次/已配送{{orderDetail.alreadyDeliveryTimes}}次</text>
        <text class="yticon icon-you"></text>
      </view>
    </view>
    <!-- 订单信息 -->
    <view class="order-info-section">
      <view class="order-info-header">订单信息</view>
      <view class="order-info">
        <view class="order-info-item">
          <text>订单编号：</text>
          <text>No.{{orderNo}}</text>
        </view>
        <view class="order-info-item">
          <text>下单时间：</text>
          <text>{{orderTime}}</text>
        </view>
        <view v-if="!(orderStatus === 1)" class="order-info-item">
          <text>支付方式：</text>
          <text>{{orderDetail.payType === 1 ? '微信支付' : '支付宝支付'}}</text>
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view v-if="orderStatus === 1" class="order-detail-btns">
      <view class="amount-container">
        应付金额：
        <text class="pay-amount">￥{{orderDetail.payAmount}}</text>
      </view>
      <view class="amount-btn">
        <!-- <button plain>取消订单</button> -->
        <button type="warn" class="pay-btn" @click="payOrder">立即支付</button>
      </view>
    </view>
    <view v-if="orderStatus === 2" class="order-detail-btns">
      <button type="warn" @click="navToStopDelivery">停奶</button>
      <button type="primary" class="change-btn" plain @click="navToChangeDelivery">改奶</button>
      <!-- <button type="warn" plain>退奶</button> -->
      <button type="primary" class="continue-btn" @click="navToDetail(orderDetail.goodId)">续奶</button>
    </view>
    <!-- <view v-if="orderStatus === 3" class="order-detail-btns">
      <view class="amount-container"></view>
      <view class="amount-btn">
        <button type="primary" class="appraisal-btn">评价</button>
      </view>
    </view> -->
    <!-- <view v-if="orderStatus === 4" class="order-detail-btns">
      <view class="amount-container"></view>
      <view class="amount-btn">
        <button type="primary" class="view-btn">查看评价</button>
      </view>
    </view> -->
    <wechat-pay
      ref="wechatPay"
    />
  </view>
</template>

<script>
import wechatPay from '@/components/wechatPay.vue'

export default {
  components: {
    wechatPay
  },
  data() {
    return {
      // 订单状态
      orderStatus: '',
      // 订单的编号
      orderNo: '',
      // 是否是补差价订单 1:是，0不是
      extraOrder: 0,
      orderTime: '--',
      // 订单详情
      orderDetail: {
        id: 1,
        orderId: 1,
        orderNo: '--',
        orderStatus: 1,
        backTime: '',
        payType: 1, // 支付方式 1 微信支付 2 支付宝支付
        goodId: 1,
        goodName: '--',
        goodImg: '',
        goodPrice: 0,
        totalNum: 0,
        avgNumPreDay: 1,
        totalAmount: 0,
        payAmount: 0,
        couponAmount: 0,
        postAmount: 0,
        remark: '',
        deliveryStart: '--',
        deliveryEnd: '--',
        deliveryModel: 1, // 配送模式 1 每日送 2 隔日送，3 双休日，4工作日
        deliveryAddress: '--',
        receiverMobile: 18888888888,
        receiverName: '--',
        deliveryTimes: '-',
        alreadyDeliveryTimes: '-',
      }
    }
  },
  filters: {
    formatStatus(status) {
      switch(status) {
        case 1:
          return '待付款'
        case 2:
          return '服务中'
        case 3:
          return '待评价'
        case 4:
          return '已完成'
        default:
          return ''
      }
    },
    formatDeliveryModel(model) {
      switch(model) {
        case 1:
          return '每日送'
        case 2:
          return '两日送'
        case 3:
          return '双休日'
        case 4:
          return '工作日'
      }
    }
  },
  async onLoad(options) {
    // this.orderStatus = Number(options.status)
    this.orderNo = options.orderNo
    const res = await this.$api.json('getOrderDetail', { orderNo: this.orderNo })
    this.orderDetail = res.orderDetail
    this.orderStatus = res.orderStatus
    this.orderTime = res.orderTime
    this.extraOrder = res.extraOrder || 0

    // 测试用
    await this.$api.json('getOrderDeliveryPlan', { orderNo: this.orderNo })
  },
  methods: {
    // 立即支付
    payOrder() {
      this.$refs.wechatPay.toggleMask()
      this.$refs.wechatPay.orderNo = this.orderNo
    },
    // 跳转到投递日历
    navToDelivery() {
      uni.navigateTo({
        url: `/pages/deliver/deliver?type=1&deliveryDate=${[this.orderDetail.deliveryStart, this.orderDetail.deliveryEnd]}&orderNo=${this.orderNo}`
      })
    },
    // 跳转到停奶
    navToStopDelivery() {
      uni.navigateTo({
        url: `/pages/orderDetail/stopDelivery?orderNo=${this.orderNo}&goodId=${this.orderDetail.goodId}`
      })
    },
    // 跳转到改奶
    navToChangeDelivery() {
      uni.navigateTo({
        url: `/pages/orderDetail/changeDelivery?orderNo=${this.orderNo}&goodId=${this.orderDetail.goodId}&avgNumPreDay=${this.orderDetail.avgNumPreDay}&goodPrice=${this.orderDetail.goodPrice}`
      })
    },
    // 续奶
    navToDetail(goodId) {
      uni.navigateTo({
        url: `/pages/product/product?id=${goodId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  page {
    background-color: #f2f2f2;
  }
  .order-detail {
    background-color: #f2f2f2;
    padding-bottom: 120rpx;
    .order-info-header {
      height: 60rpx;
      font-size: $font-lg;
      color: $font-color-dark;
    }
    // 商品信息
    .good-info-section {
      width: 100%;
      padding: 40rpx;
      background-color: #fff;
    }
    .goods-box-single{
			display: flex;
      padding: 20rpx 0;
      align-items: center;
      position: relative;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      margin-bottom: 10rpx;
			.goods-img{
				display: block;
				width: 120rpx;
				height: 120rpx;
      }
      .good-detail-info {
        display: flex;
        flex-direction: column;

      }
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
        overflow: hidden;
				.title{
					font-size: $font-base + 2rpx;
					color: $font-color-dark;
          // line-height: 1;
          margin-bottom: 10rpx;
				}
				.attr-box{
					font-size: $font-sm;
					color: $font-color-light;
					padding: 2rpx 0;
				}
      }
      .price-box{
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        position: absolute;
        top: 20rpx;
        right: 0;
        padding: 0 30rpx;
        font-size: $font-sm + 2rpx;
        color: $font-color-dark;
      }
    }
    .good-amount {
      width: 100%;
      font-size: $font-sm;
      color: $font-color-base;
      .good-amount-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .order-detail-header {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 40rpx;
    background-color: #f2f2f2;
    font-size: $font-lg;
    color: $base-color;
  }
  // 配送信息
  .delivery-info-section {
    margin-top: 30rpx;
    padding: 40rpx;
    background-color: #ffffff;
    .delivery-address-info {
      display: flex;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 20rpx 0;
      .address-container {
        margin-left: 10rpx;
        display: flex;
        flex-direction: column;
        color: $font-color-base;
        font-size: $font-sm + 2rpx;
        text {
          padding: 4rpx 0;
        }
      }
    }
    .delivery-info-times {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: $font-sm + 2rpx;
      color: $font-color-base;
      padding-top: 10rpx;
    }
  }
  // 订单信息
  .order-info-section {
    background-color: #ffffff;
    padding: 40rpx;
    margin-top: 30rpx;
    .order-info {
      width: 100%;
      // display: flex;
      font-size: $font-sm + 2rpx;
      color: $font-color-base;
      border-top: 1px solid #ccc;
      padding-top: 10rpx;
      .order-info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4rpx;
      }
    }
  }

  .order-detail-btns {
    width: 750rpx;
    padding: 20rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    // border-top: 1px solid #ccc;
    box-shadow: 0 -1px 5px rgba(0,0,0,.1);
    button {
      width: 160rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 10rpx;
    }
    .continue-btn {
      background-color: #007aff;
    }
    .change-btn {
      color: #1aad19;
      border-color: #1aad19;
    }
    .pay-btn {
      background-color: $base-color;
    }
    .amount-container {
      font-size: $font-sm;
    }
    .pay-amount {
      color: $base-color;
    }
    .amount-btn {
      display: flex;
      button {
        margin-left: 20rpx;
        font-size: $font-sm + 1rpx;
      }
    }
    & button.appraisal-btn {
      font-size: $font-lg - 4rpx;
      color: #fff;
      background-color: $base-color;
    }
    & button.view-btn {
      font-size: $font-base - 4rpx;
      color: #fff;
      background-color: $base-color;
    }
  }

</style>
